<template>
  <div class="loginBox">
    <div class="title">
      <p>注册账号</p>
    </div>
    <van-form>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="shouji"
        type="password"
        name="手机号"
        label="手机号："
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" @click="zuche"
          >注册</van-button
        >
        <br />
        <van-button round block type="info" class="login" to="login"
          >已有账号去登录！</van-button
        >
      </div>
    </van-form>
    <span
      style="font-size: 14px; float: right; margin-right: 40px"
      @click="tiao"
      >忘记密码?</span
    >
  </div>
</template>
<script>
import { getzuche } from "../../api/index";
export default {
  data() {
    return {
      username: "",
      password: "",
      shouji:"",
    };
  },
  methods: {
    async zuche() {
      try {
        let obj = {
          username: this.username,
          password: this.password,
          usermobile:this.shouji
        };
        let {
          data,
          meta: { status, msg },
        } = await getzuche(obj);
        if (status == 201) {
          console.log(data);
          this.$notify({ type: "success", message: msg });
          this.username ="";
          this.password="";
          this.shouji="";
            this.$notify({message:"三秒后跳转！"})
          setTimeout(function(){
          },3000)
            this.$router.push({path:"/login"});
        }else{
          this.$notify({ type: "success", message: msg });
          this.username ="";
          this.password="";
          this.shouji="";
        }
      } catch (error) {
        console.log(error);
        // throw new Error(error.message);
      }
    },
    tiao() {
      this.$router.push({ path: "/forgetPassword" });
    },
  },
};
</script>

<style lang="less" scoped>
.loginBox {
  .title {
    text-align: center;
    p {
      margin-top: 50px;
      font-size: 38px;
    }
  }
  .van-form {
    margin-top: 50px;
    div {
      input {
        margin: 100px 0;
      }
      .van-button {
        background-color: rgba(42, 131, 78, 1);
        color: #fff;
        border: rgba(42, 131, 78, 1);
      }
      .login {
        color: #000;
        background-color: #d8d8d8;
      }
    }
  }
}
</style>